<script setup>
import blogApi from '~/api/blog.js'
import theoneApi from '~/api/theone.js'

definePageMeta({
  layout: 'default',
})

let isOpen = ref(true)
let isOpen2 = ref(true);
let state = reactive({
  list: [],
  bannerList: [
    {
        "name": "预测活动",
        "cover": "https://resource.theone.art/author/8becc222bc3dd09b09c2bbf171b845c21727610162202.jpg",
        "returnUrl": "https://www.theone.art/vote",
        "describe": "参与预测收获积分与惊喜",
        "buttonText": "前往参加"
    },
    {
        "name": "月宫冒险-月宫秘宝抽奖活动",
        "cover": "https://resource.theone.art/author/91be540d578d9219170d6064a4376d4d1725446157747.jpg",
        "returnUrl": "https://theone.art/active/turntable_lottery/c5d2180c27be4e82babb9ca830723a7c",
        "describe": "月宫冒险-月宫秘宝抽奖活动",
        "buttonText": "前往参加"
    },
    {
        "name": "超级交易员【八宝浮屠-珍宝现世】开启第四层珍宝！！！",
        "cover": "https://resource.theone.art/author/9df90a5b53e94de8f4b580c06ee764b81728705095204.jpg",
        "returnUrl": "https://www.theone.art/synthetic_system_v2/zdcolction-cyhgfsxcnadjhsdaorwzh",
        "describe": "超级交易员【八宝浮屠-珍宝现世】开启第四层珍宝！！！",
        "buttonText": "前往参与"
    },
   
    {
        "name": "五星人——第一届一手好牌～五星牌王夺金争霸赛第三轮开启!",
        "cover": "https://resource.theone.art/author/417b3d4b532ee851679e1ac2815d664f1728546124692.jpg",
        "returnUrl": "https://www.theone.art/synthetic_system_v2/zdcolction-awivnsfbvoajafeoao",
        "describe": "五星人——第一届一手好牌～五星牌王夺金争霸赛第三轮开启!",
        "buttonText": "前往参与"
    },
    {
        "name": "龙年新标杆-喜迎中秋系列抽奖活动",
        "cover": "https://resource.theone.art/author/ab83a66ca747c2a47aaf0a7ad78e4a9d1726304719547.jpg",
        "returnUrl": "https://www.theone.art/active/turntable_lottery/07c423c9cd8a4d0385662adea5e036d9",
        "describe": "龙年新标杆-喜迎中秋系列抽奖活动",
        "buttonText": "前往抽奖"
    },
    {
        "name": "重磅来袭",
        "cover": "https://resource.theone.art/author/57cc44a2a91cb9a991368630cbed62281656062706041.jpg",
        "returnUrl": "https://www.theone.art/app_download/3d",
        "describe": "APP更新啦！元宇宙空间来袭~",
        "buttonText": "前往下载"
    }
],
  imgs: [
    "https://pic4.zhimg.com/50/v2-02013b84618ca16e52d72d1aa541d1df_400x224.jpg",
    "https://public.hxdsmy.com/static/MTcyNTI3MzEzMDg0MDE2MTYzOQ==_cdn_script_1725273140000_MTcxNjI3ODgwNzkwNDAxMjI2Mg==_1716278829665.png",
    "https://public.hxdsmy.com/static/MTcyNTI3MzEzMDg0MDE2MTYzOQ==_cdn_script_1725273149000_MTcxNjI3ODgwNzkwNDAxMjI2Mg==_1716278838752.png",
    "https://public.hxdsmy.com/static/MTcyNTI3MzEzMDg0MDE2MTYzOQ==_cdn_script_1725273158000_MTcxNjI3ODgwNzkwNDAxMjI2Mg==_1716278849339.png"
  ],
  articleList:[
    {
      title:'10月8日A股开盘沪指涨超10%，近5000只个股涨停，如何看待今日行情？',
      content:'马斯克表弟的回答：最近刚开始炒美股。总的来说分为两步：一是开户，即选一个美股券商开设股票交易账户；二是汇款注资，把人民币换成美元转账到股票交易账户上。上述第一点其实相对币换成美元转账到股票交转账到股票交易账户上股票交易账户上...', 
      author:'',
      authorTag:'',
      headImg:''
    },
    {
      title:'时隔四年，A股再登新闻联播，报道时长接近40s',
      content:'马斯克表弟的回答：最近刚开始炒美股。总的来说分为两步：一是开户，即选一个美股券商开设股票交易账户；二是汇款注资，把人民币换成美元转账到股票交易账户上。成美元转账到股票...', 
      author:'Matter Bringers',
      authorTag:'领先的财经新媒体和金融信息服务商',
      headImg:1
    },
    {
      title:'樊振东上演网球首秀，搭档张之臻 0-2 不敌陈奕迅 / 费德勒，他们发挥的怎么样？樊振东和陈奕迅水平如何？',
      content:'ATP 上海大师赛【嘉宾表演赛】重磅来袭！樊振东 / 张之臻 VS 陈奕迅 / 费德勒，上演跨界网球双打！樊振东巴黎奥运夺冠后首秀！', 
      author:'',
      authorTag:'',
      headImg:''
    },
    {
      title:'时隔四年，A股再登新闻联播，报道时长接近40s',
      content:'马斯克表弟的回答：最近刚开始炒美股。总的来说分为两步：一是开户，即选一个美股券商开设股票交易账户；二是汇款注资，把人民币换成美元转账到股票交易账户上。成美元转账到股票...', 
      author:'Matter Bringers',
      authorTag:'领先的财经新媒体和金融信息服务商',
      headImg:'https://pic4.zhimg.com/80/v2-e43a1b6b06314902b73537a9a24c375f_400x224.webp'
    },
    {
      title:'特斯拉跌超 8%，市值蒸发近 670 亿美元，Robotaxi 活动让投资者失望，为何市场不予认可？',
      content:'特斯拉盘初股价跌幅扩大至 10%，为 8 月 5 日以来最大跌幅。 特斯拉盘初股价跌逾 9%，为 8 月 5 日以来最大跌幅。 美股开盘涨跌不一，道指涨 0.19%，纳指跌 0.35%，标普 500 指数跌 0.02%。特斯拉跌近 8%，特斯拉的 Robotaxi 活动让投资者失望。富国银行涨近 4%，Q3 利润超过分析师预期。标普、道指再创新高！中国资产普涨！特斯拉市值一夜蒸发 4700 亿元，波音计划全球裁员 10% | 每日经济新闻特斯拉推出无人驾驶出租车 CyberCab ，无人驾驶货运车 Robovan，有哪些亮点？其商业前景如何？', 
      author:'Matter Bringers',
      authorTag:'领先的财经新媒体和金融信息服务商',
      headImg:'https://pic2.zhimg.com/v2-4f706a3a6fcf821e9b3eccce102554b9_400x224.jpg'
    },
    {
      title:'10月8日A股开盘沪指涨超10%，近5000只个股涨停，如何看待今日行情？',
      content:'马斯克表弟的回答：最近刚开始炒美股。总的来说分为两步：一是开户，即选一个美股券商开设股票交易账户；二是汇款注资，把人民币换成美元转账到股票交易账户上。上述第一点其实相对币换成美元转账到股票交转账到股票交易账户上股票交易账户上...', 
      author:'',
      authorTag:'',
      headImg:''
    },
    {
      title:'时隔四年，A股再登新闻联播，报道时长接近40s',
      content:'马斯克表弟的回答：最近刚开始炒美股。总的来说分为两步：一是开户，即选一个美股券商开设股票交易账户；二是汇款注资，把人民币换成美元转账到股票交易账户上。成美元转账到股票...', 
      author:'Matter Bringers',
      authorTag:'领先的财经新媒体和金融信息服务商',
      headImg:1
    },
    {
      title:'樊振东上演网球首秀，搭档张之臻 0-2 不敌陈奕迅 / 费德勒，他们发挥的怎么样？樊振东和陈奕迅水平如何？',
      content:'ATP 上海大师赛【嘉宾表演赛】重磅来袭！樊振东 / 张之臻 VS 陈奕迅 / 费德勒，上演跨界网球双打！樊振东巴黎奥运夺冠后首秀！', 
      author:'',
      authorTag:'',
      headImg:''
    },
    {
      title:'时隔四年，A股再登新闻联播，报道时长接近40s',
      content:'马斯克表弟的回答：最近刚开始炒美股。总的来说分为两步：一是开户，即选一个美股券商开设股票交易账户；二是汇款注资，把人民币换成美元转账到股票交易账户上。成美元转账到股票...', 
      author:'Matter Bringers',
      authorTag:'领先的财经新媒体和金融信息服务商',
      headImg:'https://pic4.zhimg.com/80/v2-e43a1b6b06314902b73537a9a24c375f_400x224.webp'
    },
    {
      title:'特斯拉跌超 8%，市值蒸发近 670 亿美元，Robotaxi 活动让投资者失望，为何市场不予认可？',
      content:'特斯拉盘初股价跌幅扩大至 10%，为 8 月 5 日以来最大跌幅。 特斯拉盘初股价跌逾 9%，为 8 月 5 日以来最大跌幅。 美股开盘涨跌不一，道指涨 0.19%，纳指跌 0.35%，标普 500 指数跌 0.02%。特斯拉跌近 8%，特斯拉的 Robotaxi 活动让投资者失望。富国银行涨近 4%，Q3 利润超过分析师预期。标普、道指再创新高！中国资产普涨！特斯拉市值一夜蒸发 4700 亿元，波音计划全球裁员 10% | 每日经济新闻特斯拉推出无人驾驶出租车 CyberCab ，无人驾驶货运车 Robovan，有哪些亮点？其商业前景如何？', 
      author:'Matter Bringers',
      authorTag:'领先的财经新媒体和金融信息服务商',
      headImg:'https://pic2.zhimg.com/v2-4f706a3a6fcf821e9b3eccce102554b9_400x224.jpg'
    }
  ]
})
const runtimeConfig = useRuntimeConfig();

const setIsOpen = (value) => {
  isOpen.value = value;
  isOpen2 = value;
}

watchEffect(() => {
  console.log('watch')
})


onMounted(() => {
  theoneApi().bannerList({ "pageCount": 1, "pageSize": 20 }).then(res => {
    if (res.code == 200) {
      console.log(res.data)
      // state.bannerList = res.data.records;
    }
  })
})

const fetchData = async () => {
  const postData = { c: 3, a: 1, b: 2 };
  const response = await blogApi().fiatList(postData);
  console.log(response); // 只打印一次响应
  if (response.code === 200) {
    return response.data;
  }
};

const { data } = useAsyncData(fetchData);

state.list = data

// ClientOnly 客户端渲染
</script>
<template>
  <div class="flex w-full mt-5">
    <div class="w-[75%] mb-[200px]">
      <!-- direction="vertical" -->
      <div class="py-8 px-7 bg-[#fff] rounded-[8px]">
        <el-carousel height="500px" indicator-position="outside" motion-blur :autoplay="true">
          <el-carousel-item v-for="item in state.bannerList" :key="item">
            <img :src="item.cover" class="w-full h-full" alt="">
          </el-carousel-item>
        </el-carousel>
        <div class="hot-question">
          <div class="w-full text-[18px] font-semibold text-theme ml-1 flex justify-between">
            热门问答
          </div>
          <div class="banner-article mt-[14px] text-base flex justify-between">
            <div>
              <p>在投资人“雷点上蹦迪”，拼多多为何拒绝“木秀于林”？</p>
              <span class="hot-tag mt-1 mb-4 mr-4">
                投资理财
              </span>
            </div>
            <div>
              <p>在投资人“雷点上蹦迪”，拼多多为何拒绝“木秀于林”？</p>
              <span class="hot-tag mt-1 mb-4 mr-4">
                英伟达A
              </span>
            </div>
            <div>
              <p>在投资人“雷点上蹦迪”，拼多多为何拒绝“木秀于林”？</p>
              <span class="hot-tag mt-1 mb-4 mr-4">
                英伟达A
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-5 py-8 px-7 bg-[#fff] rounded-[8px]">
        <div class="w-full text-[18px] font-semibold text-theme ml-1 flex justify-between">
          最新内容
        </div>
        <div class="content-wrap">
          <div v-for="article in state.articleList" class="article-item py-5" style="border-bottom:1px solid #F2F2F2">
            <!-- 文章标题 -->
            <h4 class="text-xl font-semibold">{{ article.title }}</h4>
            <!-- 文章作者 -->
            <div v-if="article.author" class="author mt-[14px] mb-2 flex">
              <img class="w-[30px] h-[30px] rounded-full" src="https://picx.zhimg.com/v2-1fa485a92594fb75a8a5127adf2a9942_l.jpg?source=1def8aca" alt="">
              <div class="author-info ml-2 flex flex-col">
                 <h5 class="text-theme text-xs font-semibold">{{ article.author }}</h5>
                 <p class="text-[#5C7787] text-xs mt-[2px]">{{ article.authorTag }}</p>
              </div>
            </div>
            <!-- 文章信息 -->
            <div class="article-item-info flex">
                <div class="article-item-info-main flex-1">
                  <p class="relative mt-2 text-base" :class="!article.author ? 'overflow-text-2':'overflow-text-3'">
                    {{ article.content }}
                    <!-- <span class="read-more text-xs text-[#2250f3] ml-2 click">阅读全文</span> -->
                  </p>
                  <span class="read-more text-xs text-[#2250f3] click">阅读全文</span>
                  <div class="article-option mt-4 flex w-[50%]">
                    <div class="mr-4 center-flex click text-sm text-[#8491A5]"><img class="inline-block mr-1"
                        src="/svg/pl.svg" alt="">1027条评论</div>
                    <div class="mr-4 center-flex click text-sm text-[#8491A5]"><img class="inline-block mr-1"
                        src="/svg/fx.svg" alt="">302分享</div>
                    <div class="mr-4 center-flex click text-sm text-[#8491A5]"><img class="inline-block mr-1"
                        src="/svg/sc.svg" alt="">108收藏</div>
                    <div class="mr-4 center-flex click text-sm text-[#8491A5]"><img class="inline-block mr-1"
                        src="/svg/dz.svg" alt="">3029点赞</div>
                  </div>
                </div>
                <div v-if="article.headImg" class="article-item-info-img w-[192px] h-[128px] overflow-hidden ml-4 center-flex bg-theme">
                  <img :src="article.headImg" class="w-full g-full" alt="">
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 ml-5">
      <CardWrap title="热门股票">
        <div class="mt-5">
          <div class="flex justify-between">
            <span class="text-sm font-semibold">苹果</span>
             <div>
              <span class="text-xs text-[#E94359] font-semibold mr-8">-0.67%</span>
              <span class="text-sm font-semibold">179.59</span>
             </div>
          </div>
          <div>
            <span class="text-xs bg-[#73A1CC] text-[#fff] px-1 rounded-[2px]">US</span>
            <span class="text-xs text-[#9EA6B1] ml-1">AAPL</span>
          </div>
        </div>
        <div class="mt-5">
          <div class="flex justify-between">
            <span class="text-sm font-semibold">苹果</span>
             <div>
              <span class="text-xs text-[#E94359] font-semibold mr-8">-0.67%</span>
              <span class="text-sm font-semibold">179.59</span>
             </div>
          </div>
          <div>
            <span class="text-xs bg-[#73A1CC] text-[#fff] px-1 rounded-[2px]">US</span>
            <span class="text-xs text-[#9EA6B1] ml-1">AAPL</span>
          </div>
        </div>
        <div class="mt-5">
          <div class="flex justify-between">
            <span class="text-sm font-semibold">苹果</span>
             <div>
              <span class="text-xs text-[#E94359] font-semibold mr-8">-0.67%</span>
              <span class="text-sm font-semibold">179.59</span>
             </div>
          </div>
          <div>
            <span class="text-xs bg-[#73A1CC] text-[#fff] px-1 rounded-[2px]">US</span>
            <span class="text-xs text-[#9EA6B1] ml-1">AAPL</span>
          </div>
        </div>
        <div class="mt-5">
          <div class="flex justify-between">
            <span class="text-sm font-semibold">苹果</span>
             <div>
              <span class="text-xs text-[#E94359] font-semibold mr-8">-0.67%</span>
              <span class="text-sm font-semibold">179.59</span>
             </div>
          </div>
          <div>
            <span class="text-xs bg-[#73A1CC] text-[#fff] px-1 rounded-[2px]">US</span>
            <span class="text-xs text-[#9EA6B1] ml-1">AAPL</span>
          </div>
        </div>
        <div class="mt-5">
          <div class="flex justify-between">
            <span class="text-sm font-semibold">苹果</span>
             <div>
              <span class="text-xs text-[#E94359] font-semibold mr-8">-0.67%</span>
              <span class="text-sm font-semibold">179.59</span>
             </div>
          </div>
          <div>
            <span class="text-xs bg-[#73A1CC] text-[#fff] px-1 rounded-[2px]">US</span>
            <span class="text-xs text-[#9EA6B1] ml-1">AAPL</span>
          </div>
        </div>
      </CardWrap>
      <CardWrap title="今日资讯" class="mt-5" >
        <div class="text-theme text-sm font-semibold pt-[14px] pb-5" style="border-bottom:1px solid #F2F2F2">
          10月8日A股开盘沪指涨超10%，近5000只个股涨停，如何看待今日行情？
          <span class="mt-1 block text-xs text-[#8491A5] font-thin">
            3分钟前发表
          </span>
        </div>
        <div class="text-theme text-sm font-semibold pt-[14px] pb-5" style="border-bottom:1px solid #F2F2F2">
          10月8日A股开盘沪指涨超10%，近5000只个股涨停，如何看待今日行情？
          <span class="mt-1 block text-xs text-[#8491A5] font-thin">
            3分钟前发表
          </span>
        </div>
        <div class="text-theme text-sm font-semibold pt-[14px] pb-5" style="border-bottom:1px solid #F2F2F2">
          10月8日A股开盘沪指涨超10%，近5000只个股涨停，如何看待今日行情？
          <span class="mt-1 block text-xs text-[#8491A5] font-thin">
            3分钟前发表
          </span>
        </div>
        <div class="text-theme text-sm font-semibold pt-[14px] pb-5" style="border-bottom:1px solid #F2F2F2">
          10月8日A股开盘沪指涨超10%，近5000只个股涨停，如何看待今日行情？
          <span class="mt-1 block text-xs text-[#8491A5] font-thin">
            3分钟前发表
          </span>
        </div>
      </CardWrap>
      <CardWrap title="热门标签" :showMore="false" class="mt-5">
        <div class="hot-tag-wrap mt-[14px]">
          <span class="hot-tag mb-4 mr-4">
            USDT
          </span>
          <span class="hot-tag mb-4 mr-4">
            BTC
          </span>
          <span class="hot-tag mb-4 mr-4">
            NBN
          </span>
          <span class="hot-tag mb-4 mr-4">
            英伟达A
          </span>
          <span class="hot-tag mb-4 mr-4">
            回不去的小时候
          </span>
          <span class="hot-tag mb-4 mr-4">
            LINK
          </span>
          <span class="hot-tag mb-4 mr-4">
            投资理财
          </span>
        </div>
      </CardWrap>
      <div class="mt-5 pl-1">
        <SliderFooter />
      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
// h1{
//   color: $theme;
// }</style>
